<template>
	<view class="statistics card">
		<view class="item" :style="{'--bg-color':item.bgc}" v-for="(item, index) in headList" :key="index">
			<view class="wrap">
				<view class="icon">
					<image :src="item.icon" mode=""></image>
				</view>
				<view class="info">
					<view class="total">{{ item.total }}</view>
					<view class="type-text">{{ item.text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		TOPTAB_TYPE
	} from '@/const/archives'
	export default {
		props: {
			investigationLength: {
				type: Number,
				default: 0
			},
			finishLength: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				stateType: 'all',
				headList: {
					investigation: {
						icon: 'https://cxdy-hd.oss-cn-hangzhou.aliyuncs.com/images/pad/archives-library_investigation.png',
						total: 0,
						text: '案卷调查中',
						bgc: '#F47C2F1A '
					},
					finish: {
						icon: 'https://cxdy-hd.oss-cn-hangzhou.aliyuncs.com/images/pad/archives-library_finish.png',
						total: 0,
						text: '结案归档',
						bgc: '#00B9171A'
					},
					all: {
						icon: 'https://cxdy-hd.oss-cn-hangzhou.aliyuncs.com/images/pad/archives-library_total.png',
						total: 0,
						text: '案卷总数',
						bgc: '#057FD01A'
					},
				}
			}
		},
		computed: {
			arr() {
				return [this.investigationLength, this.finishLength]
			}
		},
		watch: {
			arr: {
				handler([investigationLength, finishLength]) {
					this.headList[TOPTAB_TYPE.ALL].total = investigationLength + finishLength
					this.headList[TOPTAB_TYPE.INVESTIGATION].total = investigationLength
					this.headList[TOPTAB_TYPE.FINISH].total = finishLength
				}
			}
		},
		methods: {
			onSearchState(type) {
				this.stateType = type
				this.$emit('tabChange', type)
			}
		}
	}
</script>
<style scoped lang="scss">
	.statistics {
		display: flex;
		margin-bottom: 24px;
		padding: 20rpx;

		&>.item {
			flex: 1;
			border-radius: 16rpx;
			padding: 58rpx 0 50rpx;
			margin-right: 23px;
			color: #000;
			font-size: 19px;
			background-color: var(--bg-color);

			&.active {
				background-color: #fff;
				border-left: 5px solid #e60012;
				color: #e60012;
			}

			.wrap {
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 96rpx;
					height: 120rpx;
					margin-right: 102rpx;
				}

				.info {
					display: flex;
					flex-direction: column;
					align-items: center;

					.total {
						font-size: 48rpx;
						margin-bottom: 16rpx;
						font-weight: bold;
					}

					.type-text {
						font-size: 28rpx;
						font-weight: bold;
					}
				}
			}


		}
	}
</style>